<template>
  <div class="drop_out">
    <el-row class="search-box">
      <el-col :span="24">
        <label for="" class="choose">
          <span>退学时间：</span>
          <el-date-picker
            v-model="dateTime"
            type="daterange"
            size="small"
            placeholder="选择日期范围">
          </el-date-picker>
        </label>
        <label for="" class="choose">
          <span>学生姓名：</span> <el-input v-model="name" class="select-box" size="small"></el-input>
        </label>
        <label for="" class="choose">
          <span>证件号码：</span> <el-input v-model="cardNo" class="year-box" size="small"></el-input>
        </label>
        <label for="" class="choose">
          <el-button icon="search" type="primary" size="small" @click="getData(1)">搜索</el-button>
        </label>
      </el-col>
    </el-row>
    <ctable :thead="thead" :table-data="lists" :options="options" :page-data="pageObj"></ctable>
    <el-dialog 
      :visible.sync="dialogFlag"
      size="tiny"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="return-school">
      <span slot="title">添加班级</span>
      <el-form ref="params" label-width="100px" class="demo-ruleForm" label-position='left'>
        <el-form-item label="级别:">
          <el-select v-model="studentInfo.gradeYear" placeholder="请选择" @change="gardeChange" @visible-change="gradeVisible">
            <el-option v-for="item in gradeYears" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级:">
          <el-select v-model="studentInfo.classId" placeholder="请选择">
            <el-option v-for="item in classLists" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <div class="warning-info">温馨提示：学生“{{studentInfo.name}}”退学时所在班级为“{{studentInfo.gradeName}}级{{studentInfo.className}}”，请选择该学生复学的班级</div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFlag = false">取 消</el-button>
        <el-button type="primary" @click="btnSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import ctable from 'components/common/ctable'
  import {getDayInitTime} from 'src/filter/index'
  import {getStudentsList, getGradeList, getClassLists, returnSchool} from 'api/school/student/index'
  import common from 'src/util/common'
  export default {
    data () {
      let startDate = new Date().getTime() - 365 * 24 * 3600 * 1000
      let endDate = new Date().getTime()
      return {
        name: '', // 学生名字
        dateTime: [new Date(startDate), new Date(endDate)], // 时间插件
        startTime: 0, // 开始时间
        endTime: 0, // 结束时间
        cardNo: '', // 证件号码
        dialogFlag: false, // 对话框显示
        gradeYears: [], // 年级列表
        classLists: [], // 班级列表
        studentInfo: {}, // 学生信息
        gradeNum: 0, // 防止多次请求
        lists: [], // 数据列表
        thead: [{ // ctable组件头
          name: '姓名',
          prop: 'name'
        }, {
          name: '证件号码',
          prop: 'cardNo'
        }, {
          name: '退学时间',
          prop: 'modified',
          format: this.timeFilter
        }, {
          name: '退学原因',
          prop: 'remark'
        }],
        options: [{
          name: '复学',
          callback: this.returnSchool
        }, {
          name: '学生信息',
          callback: this.toDetail
        }, {
          name: '缴费记录',
          callback: this.toPayment
        }],
        pageObj: { // 分页
          page: {},
          callback: this.getData
        }
      }
    },
    created () {
      this.getData(1)
      getGradeList().then(res => { // 获取级别
        this.gradeYears = res.data
      })
    },
    methods: {
      getData (int) {
        this.startTime = getDayInitTime(this.dateTime[0], 1) / 1000
        this.endTime = getDayInitTime(this.dateTime[1], 2) / 1000
        getStudentsList({
          deleted: 2,
          startTime: this.startTime,
          endTime: this.endTime,
          name: this.name,
          cardNo: this.cardNo,
          page: int,
          count: 15
        }).then(v => {
          this.lists = v.data
        })
      },
      gradeVisible () { // 下拉框出现/隐藏时触发
        this.gradeNum = 1
      },
      async gardeChange (val) { // 年级变化
        if (!this.gradeNum) return
        let res = await getClassLists({grade: val})
        this.classLists = res.data
        this.studentInfo.classId = this.classLists[0].id
      },
      async returnSchool (obj) { // 复学
        this.gradeNum = 0
        this.dialogFlag = true
        this.studentInfo = obj
        this.studentInfo.gradeName = obj.gradeYear
        let res = await getClassLists({grade: obj.gradeYear})
        this.classLists = res.data
      },
      async btnSave () { // 复学确定
        if (!this.studentInfo.gradeYear || !this.studentInfo.classId) return this.$message({ message: '请选择年级与班级', type: 'warning' })
        await returnSchool({id: this.studentInfo.id, gradeYear: this.studentInfo.gradeYear, classId: this.studentInfo.classId})
        this.dialogFlag = false
        this.$message({
          message: `${this.studentInfo.name}复学成功`,
          type: 'success'
        })
        this.getData(1)
      },
      toDetail (obj) {
        this.$router.push({name: 'studentDetail', query: {id: obj.id, deleted: 2}})
      },
      toPayment (obj) {
        this.$router.push({name: 'dropOutPaymentInfo', query: {id: obj.id, name: obj.name}})
      },
      timeFilter (obj) {
        return common.timeFormat(obj.modified, 'yyyy.MM.dd')
      }
    },
    components: {
      ctable
    }
  }
</script>

<style lang='less'>
  .drop_out {
     padding: 15px 25px 0;
    .search-box {
      padding: 25px 0 25px 25px;
      border: 1px solid #d3dce6;
      .choose {
        margin-right: 10px;
        .select-box {
          width: 120px;
        }
        .year-box {
          width: 200px;
        }
      }
    }
    .return-school {
      .el-dialog__header{
        background-color: #457ed8;
        padding-bottom: 16px;
        color: #fff;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
      }
      .el-dialog__footer {
        text-align: center;
      }
      .warning-info {
        color: #ff4949;
      } 
    }
  }
</style>